import { useState } from 'react';
import {
  Container,
  Box,
  Button,
  Typography,
  Paper,
  Tabs,
  Tab,
} from '@mui/material';
import { Add as AddIcon } from '@mui/icons-material';
import PromotionList from '../components/PromotionList';
import PromotionForm from '../components/PromotionForm';
import { useAuth } from '../../auth/AuthContext';
import { Promotion } from '../services/PromotionService';

interface TabPanelProps {
  children?: React.ReactNode;
  index: number;
  value: number;
}

function TabPanel(props: TabPanelProps) {
  const { children, value, index, ...other } = props;

  return (
    <div
      role="tabpanel"
      hidden={value !== index}
      id={`promotion-tabpanel-${index}`}
      aria-labelledby={`promotion-tab-${index}`}
      {...other}
    >
      {value === index && (
        <Box sx={{ py: 3 }}>
          {children}
        </Box>
      )}
    </div>
  );
}

const PromotionPage = () => {
  const [tabValue, setTabValue] = useState(0);
  const [formOpen, setFormOpen] = useState(false);
  const [editingPromotion, setEditingPromotion] = useState<Promotion | undefined>();
  const { user } = useAuth();

  const handleTabChange = (_: React.SyntheticEvent, newValue: number) => {
    setTabValue(newValue);
  };

  const handleEdit = (promotion: Promotion) => {
    setEditingPromotion(promotion);
    setFormOpen(true);
  };

  const handleCreate = () => {
    setEditingPromotion(undefined);
    setFormOpen(true);
  };

  const handleSaveSuccess = () => {
    // 刷新当前标签页
    window.location.reload();
  };

  return (
    <Container maxWidth="lg" sx={{ py: 4 }}>
      <Paper sx={{ p: 3 }}>
        <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 3 }}>
          <Typography variant="h5" component="h1">
            促销活动
          </Typography>
          {user && user.role === 'admin' && (
            <Button
              variant="contained"
              startIcon={<AddIcon />}
              onClick={handleCreate}
            >
              创建活动
            </Button>
          )}
        </Box>

        <Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
          <Tabs
            value={tabValue}
            onChange={handleTabChange}
            aria-label="promotion tabs"
          >
            <Tab label="全部活动" id="promotion-tab-0" />
            <Tab label="进行中" id="promotion-tab-1" />
            <Tab label="有效活动" id="promotion-tab-2" />
          </Tabs>
        </Box>

        <TabPanel value={tabValue} index={0}>
          <PromotionList type="all" onEdit={handleEdit} />
        </TabPanel>
        <TabPanel value={tabValue} index={1}>
          <PromotionList type="active" onEdit={handleEdit} />
        </TabPanel>
        <TabPanel value={tabValue} index={2}>
          <PromotionList type="effective" onEdit={handleEdit} />
        </TabPanel>

        <PromotionForm
          open={formOpen}
          onClose={() => setFormOpen(false)}
          onSaveSuccess={handleSaveSuccess}
          promotion={editingPromotion}
        />
      </Paper>
    </Container>
  );
};

export default PromotionPage;